import { Chart, MarkNode } from "@antv/g2";
import { EQUIPMENT } from "@b/model/enum";

export class BoxEq {
    chart?: Chart;
    width: number;
    height: number;
    line?: MarkNode
    constructor(width: string, height: string) {
        this.width = parseInt(width)
        this.height = parseInt(height)
    }
    init() {
        const { width, height } = this
        this.chart = new Chart({
            container: document.getElementById('box31') as HTMLElement,
            width, height,
            theme: 'classicDark',
            // title: '设备共享数量统计'
        })
        this.chart
            .data([])
            .encode('x', 'dateValue')
            .encode('y', 'value')
            .encode('color', 'name')
            .scale('color', {
                domain: [...EQUIPMENT.values()],
                range: ['#5087ec', '#68bbc4', '#58a55c', '#f4c55a', '#ee752f', '#d95040', '#00c4ef', '#d90025'],
            })
            .scale('y', {
                nice: true,
                domainMin: 0,
                unknown: 0
            })
            .axis('y', { title: false })
            .axis('x', {
                title: false, labelFormatter: (data: string) => {
                    const d = data.split('-')
                    if (d[2] == '01') {
                        return d[0] + '年' + d[1]
                    } else {
                        return d[2]
                    }
                }
            })

        this.line = this.chart.line()
        this.chart.point().tooltip(false)
        this.chart.render()
    }
    setData(data: any[], time: Date[]) {
        if (time) {
            const d = []
            const domain: string[] = []
            const startDate = time[0].getTime()
            const endDate = time[1].getTime()
            const eq = (endDate - startDate) / 86400000 + 1
            for (let index = 0; index < eq; index++) {
                const date = new Date(startDate + index * 86400000).toLocaleDateString(undefined, {
                    year: "numeric",
                    month: "2-digit",
                    day: "2-digit",
                }).replaceAll('/', '-')
                domain.push(date)
                const item = data.find(item => item.dateValue === date)
                if (item) {
                    d.push(item)
                } else {
                    d.push({ dateValue: date, name: '检验', value: 0 })
                }
            }
            this.chart?.scale('x', {
                type: 'band',
                domain
            })
            this.line?.scrollbar('x', {
                ratio: 21 / d.length,
                style: {
                    thumbFill: '#fff'
                }
            })
            this.chart?.changeData({
                type: 'inline',
                value: d,
                transform: [{
                    type: 'map',
                    callback: (datum: any, idx: any) => {
                        return {
                            ...datum,
                            name: EQUIPMENT.get(datum.name) || '其他'
                        }
                    },
                }]
            })
        } else {
            this.line?.scrollbar('x', {
                ratio: 21 / data.length,
                style: {
                    thumbFill: '#fff'
                }
            })
            this.chart?.changeData({
                type: 'inline',
                value: data,
                transform: [{
                    type: 'map',
                    callback: (datum: any, idx: any) => {
                        return {
                            ...datum,
                            name: EQUIPMENT.get(datum.name) || '其他'
                        }
                    },
                }]
            })
        }
    }
}